import React from "react";
import { Card, Tabs, Avatar, Descriptions, Button, message } from "antd";
import BasicInformation from "./BasicInformation";
import ModifyInformation from "./ModifyInformation";
import ModifyPassword from "./ModifyPassword";
import PhoneBinding from "./PhoneBinding";
import WechatBinding from "./WechatBinding";
import { useStore } from "../../stores/store.jsx";
import { useNavigate } from "react-router-dom";
import Cookies from "js-cookie";

function PersonalCenter() {
  const { state, dispatch } = useStore(); // 从 store 中获取用户信息
  const userInfo = state.userInfo || {}; // 防止 userInfo 为空
  const navigate = useNavigate(); // 路由跳转

  // 退出登录方法
  const handleLogout = () => {
    dispatch({ type: "LOGOUT" }); // 清除全局状态中的用户信息
    Cookies.remove("access_token"); // 清除 Cookies 中的 access_token
    message.success("已退出登录");
    navigate("/login"); // 跳转到登录页面
  };

  return (
    <div style={{ padding: "20px" }}>
      <Card variant="outlined" style={{ marginBottom: "20px" }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <div style={{ display: "flex", alignItems: "center" }}>
            <Avatar size={80} style={{ marginRight: "20px" }}>
              {userInfo.real_name?.[0] || "U"}
            </Avatar>
            <Descriptions column={1}>
              <Descriptions.Item label="用户名">
                {userInfo.username || "未填写"}
              </Descriptions.Item>
              <Descriptions.Item label="身份">
                {userInfo.role === 1
                  ? "超级管理员"
                  : userInfo.role === 2
                  ? "招聘方"
                  : "求职者"}
              </Descriptions.Item>
              <Descriptions.Item label="账号">
                {userInfo.email || "未填写"}
              </Descriptions.Item>
            </Descriptions>
          </div>
          <Button type="primary" danger onClick={handleLogout}>
            退出登录
          </Button>
        </div>
      </Card>

      <Card>
        <Tabs
          defaultActiveKey="1"
          items={[
            {
              key: "1",
              label: "详细信息",
              children: <BasicInformation />,
            },
            {
              key: "2",
              label: "修改信息",
              children: <ModifyInformation />,
            },
            {
              key: "3",
              label: "修改密码",
              children: <ModifyPassword />,
            },
            {
              key: "4",
              label: "手机绑定",
              children: <PhoneBinding />,
            },
            {
              key: "5",
              label: "微信绑定",
              children: <WechatBinding />,
            },
          ]}
        />
      </Card>
    </div>
  );
}

export default PersonalCenter;
